<template>
  <div class="mod-home">
    <!-- 顶部文字 -->
    <p class="top-til">
      您好，欢迎您光临E智人力资源网站管理端
      <svg
        class="icon"
        width="20"
        height="20"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M358.788 108c112 0 202.792 145.412 202.792 324.788s-90.792 324.792-202.792 324.792c-111.996 0-294.348-263.716-294.348-443.092C64.44 135.108 246.792 108 358.788 108z"
          fill="#FF8787"
        />
        <path
          d="M524.124 216.352C454 122 352 70.468 212.552 87.904 2.752 114.136-148.144 524 512.652 964c0 0 598.096-364.292 458.096-738.884-44.376-118.736-221.208-182.396-367.584-78.692C457.12 249.884 456 409.836 456 409.836"
          fill="#FF6387"
          opacity=".7"
        />
        <path
          d="M512.656 994c-5.804 0-11.6-1.68-16.628-5.028-194.308-129.388-333.944-265.504-415.036-404.58C-5.572 435.924-4.06 321.268 12.456 251.224c24.868-105.492 101.952-181.284 196.376-193.088 129.148-16.156 238.592 23.38 318.576 114.552 16.6-17.68 35.924-34.816 58.416-50.748 78.092-55.316 172.244-71.868 258.264-45.4 72.992 22.448 130.844 74.064 154.764 138.072 34.696 92.832 30.336 192.276-12.944 295.58-33.616 80.232-90.828 162.852-170.04 245.584-133.208 139.132-281.372 230.048-287.608 233.844a29.984 29.984 0 0 1-15.604 4.38zM264.528 114.572c-15.62 0-31.7 1.032-48.252 3.1-69.284 8.664-126.364 66.492-145.42 147.32-17.432 73.948-36.256 338.428 442.196 663.124 92.244-60.548 546.884-378.68 429.6-692.5-17.448-46.684-60.888-84.716-116.2-101.728-68.112-20.948-143.18-7.456-205.944 37.012-131.008 92.808-134.428 233.308-134.508 239.244a30.028 30.028 0 0 1-30.308 29.636c-16.528-0.172-29.804-13.628-29.688-30.16 0.036-5.22 1.636-96.796 63.348-189.076-57.844-70.452-133.264-105.972-224.824-105.972z"
          fill="#6E6E96"
        />
        <path
          d="M451.992 434.008a30.012 30.012 0 0 1-28.688-21.264c-1.82-5.976-43.384-147.504 60.816-250.244a29.996 29.996 0 0 1 42.428 0.3 30.004 30.004 0 0 1-0.304 42.424c-78.636 77.54-45.884 188.916-45.544 190.032a30 30 0 0 1-19.952 37.44 30.032 30.032 0 0 1-8.756 1.312z"
          fill="#6E6E96"
          opacity=".15"
        />
        <path
          d="M512.652 933.456a30.024 30.024 0 0 1-16.628-5.028c-188.488-125.508-324.116-253.084-403.124-379.18C7.6 413.108 7.536 308.856 22.504 245.372c24.116-102.296 105.204-176.584 206.576-189.256a29.988 29.988 0 0 1 33.492 26.044 30 30 0 0 1-26.044 33.492c-76.232 9.532-137.316 65.856-155.62 143.492-17.7 75.084 4.028 164.388 62.84 258.252 72.204 115.244 196.372 232.972 369.188 350.108 88.772-58.976 511.104-356.936 429.056-633.868a29.992 29.992 0 0 1 20.244-37.284 29.996 29.996 0 0 1 37.288 20.244c24.72 83.424 14.064 173.664-31.668 268.212-35.348 73.084-91.808 148.988-167.808 225.616-127.896 128.94-265.78 214.936-271.584 218.54a30.12 30.12 0 0 1-15.812 4.492z"
          fill="#6E6E96"
          opacity=".15"
        />
        <path
          d="M136.733505 284.743858a58 76 9.105 1 0 114.5384 18.356331 58 76 9.105 1 0-114.5384-18.356331Z"
          fill="#FFFFFF"
          opacity=".5"
        />
      </svg>
    </p>
    <hr />
    <div class="bigBox">
      <p class="title">使用说明：</p>
      <p v-for="(item, index) in pList" :key="index">
        {{ item.id }}{{ item.til }}：{{ item.con }}
      </p>
    </div>
    <div class="photoGroup">
      <div
        class="item"
        v-for="(item, index) in photoGroup"
        :key="index"
        @click="toWb(index)"
      >
        <img :src="item" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoGroup: [
        require("../../assets/img/1.jpg"),
        require("../../assets/img/1 (1).jpg"),
        require("../../assets/img/1 (2).jpg"),
        require("../../assets/img/1 (3).jpg"),
        require("../../assets/img/wb.png"),
        require("../../assets/img/1 (4).jpg"),
        require("../../assets/img/1 (5).jpg"),
        require("../../assets/img/1 (6).jpg"),
        require("../../assets/img/1 (7).jpg"),
      ],
      pList: [
        {
          id: 1,
          til: "系统管理",
          con: "管理员可以对用户赋予相应的角色以及对系统进行相应的管理。",
        },
        {
          id: 2,
          til: "部门管理",
          con: "管理员可以对部门进行增删改查等处理，以及查看部门关系图等操作。按条件筛选",
        },
        {
          id: 3,
          til: "薪资管理",
          con: "管理员可以对薪资进行增删改查等处理。按条件筛选。",
        },
        {
          id: 4,
          til: "日报管理",
          con: "管理员可以对用户填写的日报进行审批（通过或者驳回），按条件筛选。",
        },
        {
          id: 5,
          til: "申请管理",
          con: "管理员可以对用户的申请进行审批（通过或者驳回），按条件筛选。",
        },
        {
          id: 6,
          til: "考勤管理",
          con: "管理员可以按条件筛选用户的打开信息，进行审批。",
        },
        {
          id: 7,
          til: "通知管理",
          con: "管理员可以对用户端的通知栏进行管理，以及按条件筛选。",
        },
        {
          id: 8,
          til: "项目管理",
          con: "管理员对项目进行增删改查等操作以及项目分配，项目监管等功能。",
        },
      ],
    };
  },
  mounted() {
    var path = document.querySelector("path");
    var length = path.getTotalLength();
    console.log(length);
  },
  methods: {
    toWb(val) {
      if (val == 4) {
        window.open("https://weibo.com/u/5614709633");
      }
    },
  },
};
</script>

<style lang="scss">
.mod-home {
  line-height: 1.5;
  overflow: hidden;
  .top-til {
    font-size: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 2s;
    &:hover {
      transform: rotateY(360deg) rotateX(360deg);
    }
  }
  .bigBox {
    width: 50%;
    float: left;
    .title {
      font-size: 25px;
      font-weight: 600;
    }
    p {
      font-size: 20px;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  .photoGroup {
    width: 50%;
    float: right;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      width: 32%;
      height: 10vw;
      margin-bottom: 2vw;
      cursor: pointer;
      transition: all 0.6s;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}
</style>

